<template>
  <div>
    <heads>严选专栏</heads>
    <ul class="list">
      <li v-for="(itme, index) in news" :key="index">
        <img :src="itme.pic" alt="" />
        <p>{{ itme.title }}</p>
        <p>{{ itme.descript }}</p>
        <p>查看详情</p>
      </li>
    </ul>
  </div>
</template>

<script>
import heads from "@/components/Heads";
import { getbanner, getKanjia, news, getgoods } from "@/utils/api/Index.js";
export default {
  components: {
    heads,
  },
  mounted() {
    news().then((res) => {
      this.news = res.data;
    });
  },
  data() {
    return {
      news: [],
      // 严选数据
    };
  },
};
</script>

<style lang="scss" scoped>
.list {
  margin-top: 1.4rem;
  li {
    padding: 0 0.16rem;
    padding-top: 0.2rem;
    text-align: center;
    position: relative;
    box-sizing: border-box;

    img {
      width: 100%;
      height: 3.84rem;
      display: block;
      background: rgba(0, 0, 0, 0.7);
    }
    p {
      position: absolute;
    }
    p:nth-of-type(1) {
      top: 0.9rem;
      left: 10%;
      width: 80%;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 0.38rem;
      color: #fff;
    }
    p:nth-of-type(2) {
        top: 1.8rem;
        width: 80%;
        left: 10%;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.3rem;
        color: #fff;
    }
    p:nth-of-type(3){
        top: 2.46rem;
        left: 50%;
        transform: translateX(-50%);
        width: 2.12rem;
        height: 0.57rem;
        text-align: center;
        line-height: 0.57rem;
        color: #fff;
        border: 1px solid #fff;
        border-radius: 25px;
    }
  }
}
</style>